<template>
	<!-- 商品组 -->
	<!-- 搜索框 -->
	<view class="body">
		<view class="inputss">
			<img src="./static/index/搜索.png" alt="" class="imgs">
			<input type="text" class="uni-input" placeholder="搜索你要找的商品" v-model.trim="inputs" :disabled="true" />
		</view>
		<!-- 数据 -->
		<view>
			<uni-segmented-control :current="tab.current" :values="tab.items" @clickItem="onClickItem" styleType="text"
				activeColor="#4cd964"></uni-segmented-control>
			<view>
				<view v-show="tab.current === 0">
					<!-- 商品列表 -->
					<view class="like">
						<view class="commodity">
							<view class="commodityItem" v-for="item in list" :key="item.goods_id"
								@tap="goDetails(item.goods_id)">
								<img class=" img" :src="item.goods_image" alt="">
								<view class="info">
									<view class="name">{{item.goods_name}}</view>
									<view class="Sold">
										已售{{item.goods_sales}}件
									</view>
									<view class="price">
										<span class="current">￥{{item.goods_price_max}}</span>
										<span class="original"
											v-if="item.line_price_max!=='0.00'">￥{{item.line_price_max}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="tab.current === 1">
					<!-- 商品列表 -->
					<view class="like">
						<view class="commodity">
							<view class="commodityItem" v-for="item in list" :key="item.goods_id"
								@tap="goDetails(item.goods_id)">
								<img class=" img" :src="item.goods_image" alt="">
								<view class="info">
									<view class="name">{{item.goods_name}}</view>
									<view class="Sold">
										已售{{item.goods_sales}}件
									</view>
									<view class="price">
										<span class="current">￥{{item.goods_price_max}}</span>
										<span class="original"
											v-if="item.line_price_max!=='0.00'">￥{{item.line_price_max}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="tab.current === 2">
					<!-- 商品列表 -->
					<view class="like">
						<view class="commodity">
							<view class="commodityItem" v-for="item in list" :key="item.goods_id"
								@tap="goDetails(item.goods_id)">
								<img class=" img" :src="item.goods_image" alt="">
								<view class="info">
									<view class="name">{{item.goods_name}}</view>
									<view class="Sold">
										已售{{item.goods_sales}}件
									</view>
									<view class="price">
										<span class="current">￥{{item.goods_price_max}}</span>
										<span class="original"
											v-if="item.line_price_max!=='0.00'">￥{{item.line_price_max}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		searchApi
	} from '@/apis/index.js'

	// 调用接口参数
	const data = ref({
		goodsName: '',
		page: '1',
		sortType: 'all'
	})

	// 封装接口
	const listAll = async () => {
		const res = await searchApi(data.value.goodsName, data.value.page, data.value.sortType)
		list.value = res.data.list.data
	}
	// 接受返回数据
	const list = ref([])
	// 进入页面拿跳转过来携带的数据  调用接口
	onLoad(async (params) => {
		data.value.goodsName = params.name
		listAll()
		inputs.value = params.name
	})

	// tabbar标签
	const tab = ref({
		items: ['综合', '销量', '价格'],
		current: 0
	})
	// tabbar切换数据
	const onClickItem = (e) => {
		tab.value.current = e.currentIndex
		if (tab.value.current === 0) {
			data.value.sortType = 'all'
			listAll()
		}
		if (tab.value.current === 1) {
			data.value.sortType = 'sales'
			listAll()
		}
		if (tab.value.current === 2) {
			data.value.sortType = 'price'
			listAll()
		}
	}

	// input框
	const inputs = ref('')

	// 点击商品跳转详情页
	const goDetails = (id) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	// 控制显示隐藏
	.active {
		display: none;
	}

	.inputss {
		width: 100%;
		height: 100rpx;
		display: flex;
		// justify-content: center;
		position: relative;
		background-color: #ebebeb;
	}

	.uni-input {
		background-color: #fff;
		border-radius: 10rpx;
		height: 70rpx;
		width: 650rpx;
		margin-top: 15rpx;
		padding-left: 70rpx;
		margin-left: 20rpx;
		color: #999;
		// text-align: center;
	}

	.bodys {
		background-color: #ebebeb;
		width: 100%;
		height: 1400rpx
	}


	.imgs {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		top: 27rpx;
		left: 40rpx;
	}

	// 背景色
	.body {
		width: 100%;
		height: 1500rpx;
		background-color: #fafafa;
	}

	// 猜你喜欢
	.like {
		width: 100%;
		height: 100%;
		// margin-top: 630rpx;
		margin-top: 10rpx;
	}

	.like .top {
		width: 100%;
		height: 60rpx;
		background-color: #fff;
		text-align: center;
		margin-bottom: 5rpx;
	}

	.like .top .info {
		line-height: 45rpx;
	}

	.like .commodityItem {
		width: 100%;
		height: 280rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}

	.like .commodityItem .img {
		width: 240rpx;
		height: 240rpx;
		margin-left: 15rpx;
		// background-color: #00ff00;
	}

	.like .commodityItem .info {
		flex: 1;
		height: 100%;
		margin-left: 20rpx;
		padding-right: 10rpx;
		// background-color: #00557f;
	}

	.like .commodityItem .info .name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.like .commodityItem .info .Sold {
		font-size: 24rpx;
		color: #b7b7b8;
		margin-top: 20rpx;
	}

	.like .commodityItem .info .price {
		margin-top: 20rpx;
	}

	.like .commodityItem .info .price .current {
		color: #aa5500;
		font-size: 36rpx;
	}

	.like .commodityItem .info .price .original {
		color: #b7b7b8;
		font-size: 28rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
</style>